<template>
  <el-card>
    <img class="home_banner" src="@/assets/images/home_bg.jpg" alt="" />

    <!-- 首页展示，三个学科的布局按钮 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <router-link to="/subject?subject=js">
          <div style="background: #2196f3;" class="grid-content">
            H5学科项目库
          </div>
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link to="/subject?subject=java">
          <div style="background: #ff5722;" class="grid-content">
            Java学科项目库
          </div>
        </router-link>
      </el-col>
      <el-col :span="8">
        <router-link to="/subject?subject=ui">
          <div style="background: #f44336" class="grid-content">
            UI学科项目库
          </div>
        </router-link>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style lang="scss" scoped>
.el-card {
  min-height: 500px;
}

.el-row {
  margin-top: 40px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.home_banner {
  width: 100%;
}
</style>
